<template>
  <FullBox>
    <div class='productTag list-b-12'>
      <div class='productTag-item' v-for="(item, index) in data.productTagList">
        <div class='productTag-head list-r-8' @click="item.isRetract = !item.isRetract">
          <el-icon>
            <ArrowDown v-if="item.isRetract" />
            <ArrowUp v-else />
          </el-icon>
          <h3>{{ `${item.productTagName || '未知'}${item.tagWidth && item.tagHeight ?
            `【${item.tagWidth}*${item.tagHeight}mm】`
            : ''}` }}</h3>
          <template v-if="isEdit">
            <el-link @click.stop="copyRow(data.productTagList, item, index)">复制</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link size="small" @click.stop="delRow(data.productTagList, index)">删除</el-link>
          </template>
        </div>
        <div class='productTag-main list-b-12' v-if="!item.isRetract">
          <FlexBox :list="4">
            <ElFormItemBox label="产品名称" :prop="`productName`">
              <ElInputBox :data="item" dataName="productTagName" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="标签类型" :prop="`tagType`">
              <ElSelectBox :data="item" dataName="tagType" :options="proxy.$optionsArr.tagType" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="标签形状" :prop="`tagShape`">
              <ElSelectBox :data="item" dataName="tagShape" :options="proxy.$optionsArr.tagShape" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="标签数量" :prop="`matchQuantity`">
              <ElNumberBox :data="item" dataName="matchQuantity" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="标签长度" :prop="`tagWidth`">
              <ElNumberBox :data="item" dataName="tagWidth" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="标签宽度" :prop="`tagHeight`">
              <ElNumberBox :data="item" dataName="tagHeight" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="R角" :prop="`tagBorderRadius`">
              <ElNumberBox :data="item" dataName="tagBorderRadius" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="边空" :prop="`tagBorder`">
              <ElNumberBox :data="item" dataName="tagBorder" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="被贴物" :prop="`postedContent`">
              <ElInputBox :data="item" dataName="postedContent" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="丝网涂层" :prop="`scrapingCoatingColorName`">
              <TextSeact :data="item" dataName="scrapingCoatingColorName" dataCode="scrapingCoatingColor"
                :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="丝网文字" :prop="`scrapingWordColorName`">
              <TextSeact :data="item" dataName="scrapingWordColorName" dataCode="scrapingWordColor"
                :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="表面要求" :prop="`surfaceRequires`">
              <ElSelectBox :data="item" :max="1" dataName="surfaceRequires" split="," multiple
                :options="options.surfaceRequires" :disabled="!isEdit" />
            </ElFormItemBox>
          </FlexBox>
          <div class="productTag-tier list-b-12">
            <div class="productTag-tier-item" v-for="(tier, tierIndex) in item.productTagPrintingLayerList">
              <div class="productTag-tier-title">
                <h4>{{ tierName(tier, tierIndex, item.productTagPrintingLayerList.length) }}</h4>
                <div class="list-r-8" v-if="isEdit">
                  <el-link @click="copyRow(item.productTagPrintingLayerList, tier, tierIndex)">复制</el-link>
                  <template v-if="tierIndex !== 0">
                    <el-divider direction="vertical"></el-divider>
                    <el-link size="small" @click="delRow(item.productTagPrintingLayerList, tierIndex)">删除</el-link>
                  </template>
                </div>
              </div>
              <div class="productTag-tier-main">
                <FlexBox :list="4">
                  <ElFormItemBox label="底膜颜色" :prop="`baseFilmColorName`">
                    <TextSeact :data="tier" dataName="baseFilmColorName" dataCode="baseFilmColor" :disabled="!isEdit" />
                  </ElFormItemBox>
                  <ElFormItemBox label="图层材料" :prop="`printingMaterialName`">
                    <TextSeact :data="tier" dataName="printingMaterialName" dataCode="printingMaterial"
                      type='PrintingMaterial' :disabled="!isEdit" />
                  </ElFormItemBox>
                  <ElFormItemBox label="图层留胶" :prop="`liuJiaoTextureName`">
                    <TextSeact :data="tier" dataName="liuJiaoTextureName" dataCode="liuJiaoTexture"
                      type='LiuJiaoTexture' :disabled="!isEdit" />
                  </ElFormItemBox>
                  <ElFormItemBox label="条码位数" :prop="`barCodePlaces`">
                    <ElNumberBox :data="tier" dataName="barCodePlaces" :disabled="!isEdit" />
                  </ElFormItemBox>
                  <ElFormItemBox label="数码位数" :prop="`technoPlaces`">
                    <ElNumberBox :data="tier" dataName="technoPlaces" :disabled="!isEdit" />
                  </ElFormItemBox>
                  <ElFormItemBox label="数码颜色" :prop="`technoColor`">
                    <ElSelectBox :data="tier" dataName="technoColor" :all="{
                      label: '无',
                      value: -1,
                    }" :options="proxy.$optionsArr.technoColor" :disabled="!isEdit" />
                  </ElFormItemBox>
                </FlexBox>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-affix position="bottom" :offset="60" v-if="isEdit">
        <div class="flex-center-center">
          <el-button type="primary" @click="saveBtn(data.baseData)">保存标签信息</el-button>
        </div>
      </el-affix>
    </div>
  </FullBox>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    setState?: Function;//更改状态
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
const copyRow = (arr: any[], row: any, index: number) => {
  const _row = proxy.$initializeAtPath(row, ['productPrintingLayerID', 'productPrintingLayerCode', 'productTagCode', 'productPrintingLayerID', 'productPrintingLayerCode'])
  arr.splice(index, 0, _row)
};
const delRow = (arr: any[], index: number) => {
  arr.splice(index, 1)
};
const tierName = (row: any, index: number, length: number) => {
  let name = "表层";
  if (length > 0) {
    if (index === 0) {
      name = "表层";
    } else if (index === length - 1) {
      name = "底层";
    } else if (index === 1) {
      name = "里层";
    } else {
      name = "里层" + (index - 1);
    }
  }
  row.printingLayerName = name;
  return name;
};
const saveBtn = (form: any) => {
  const _productCode = props.data.baseData.productCode
  proxy.$api.OrderBusniess.UpdateProductTag({
    productCode: _productCode,
    productTagViewList: props.data.productTagList.map((el: any) => ({
      ...el,
      productCode: _productCode, // 产品编码
      productTagPrintingLayerList: el.productTagPrintingLayerList.map((row: any) => ({
        ...row,
        productTagCode: el.productTagCode,
      }))
    }))
  })
    .then((res: any) => {
      proxy.$message('保存成功')
      emit('saveBtn')
    })
    .catch((e: any) => {

    });
};
//获取表面要求
const getSurfaceRequires = () => {
  proxy.$api.System.QueryPageDictionaryValueDataList({
    pageIndex: 1,
    pageSize: 9999,
    queryDataBaseFiled: '',
    likeWords: '',
    dictionaryCode: 'SurfaceRequire', //系统数据字典代码（唯一识别码）
    dicValueState: -1 //系统数据字典状态：1可用；0不可用，-1查询全部
  }).then((res: any) => {
    props.options.surfaceRequires = res.list.map((el: any) => ({
      ...el,
      label: el.displayValue,
      value: el.dicValueCode,
    }))
  });
};
onMounted(() => {
  getSurfaceRequires()
});
</script>
